import React, {Fragment} from 'react';
import Login from './login';
import './login.example.scss'
import QuickDeleteExample from './quickDeleteExample';

export default function () {
  return(
    <Fragment>
      <div className="card">
        <div className="site-code">
          <h4>基本说明</h4>
          <p>包裹在 <span className={'code'}>.re-input-row</span>
            类中的 input、textarea等元素都将被默认设置宽度
            属性为width: 100%; 。 将 label 元素和上述控件控件包裹在
            <span className={'code'}>.re-input-group</span>中可以获得更好的排列。</p>
        </div>
        <div className="card-center re-login-example">
          <Login />
        </div>
        <div className="site-code">
          <pre>
{`< form action="" className={'re-input-group'} style={{maxWidth:'320px'}}>
  <label>
    <div className={'re-input-row'}>
      <span>用户名</span>
      <input type="text" className={'re-input-clear'} placeholder={'请输入用户名'}/>
      <span className={'re-input-icon re-hidden'}>
        <Icon name="close" />
      </span>
    </div>
  </label>
  <label>
    <div className={'re-input-row'}>
      <span>密码</span>
      <input type="password" placeholder={'请输入密码'}/>
    </div>
  </label>
  <div className="re-button-row">
    <button type={'button'} className={'re-btn-confirm'}>确认</button>
    <button type={'button'} className={'re-btn-danger'}>取消</button>
  </div>
</form>`}
          </pre>
        </div>
      </div>
      <div className="card">
        <div className="card-center">
          <QuickDeleteExample/>
        </div>
      </div>
    </Fragment>
  )
}